<script setup>
import { ref } from 'vue';
import {onPullDownRefresh} from '@dcloudio/uni-app'
	const bookList = ref([])
	const getBookList = async() => {
		const res = await uni.request({
			method: 'GET',
			url: "https://hmajax.itheima.net/api/books",
			data: {creator: "lsq"}
		})
		console.log(res)
		bookList.value = res.data.data
	}
	getBookList()
	
	onPullDownRefresh(async () => {
		await getBookList()
		uni.stopPullDownRefresh()
	})
</script>

<template>
	<view>
		<navigator class="book-add" url="/pages/book-add/book-add">新增图书</navigator>
		<view class="book-list">
			<view class="book-item row" v-for="item in bookList" :key="item.id">
				<image class="book-image" src="../../static/logo.png" mode=""></image>
				<view class="column">
					<text class="book-name">书名：{{item.bookname}}</text>
					<text class="book-author">作者：{{item.author}}</text>
					<text class="book-publish">出版社：{{item.publisher}}</text>
					<view class="row book-options">
						<button class="book-options-button" size="mini" type="primary">查看</button>
						<button class="book-options-button" size="mini" type="warn">删除</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	.book-add {
		background-color: $uni-color-primary;
		text-align: center;
		height: 60rpx;
		color: #fff;
	}
	.book-list {
		.book-item {
			padding: 20rpx;
			font-size: 30rpx;
			&:not(:last-child){
				border-bottom: 1rpx solid #ddd;
			}
		}
		.book-image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
		}
		
		.book-options {
			margin-top: auto;
		}	
	}
</style>
